import { Tabs } from 'antd';
import style from '../css/SchedulingSettings.module.scss'
import type { TabsProps } from 'antd';
import { Outlet, useNavigate } from 'react-router';
import { useEffect } from 'react';
function SchedulingSettings() {
    // 编程式导航
    const navigate = useNavigate()
    // 重定向
    useEffect(()=>{
        navigate('/index/WorkforceManagement/SchedulingSettings/BasicSettings')
    },[])
    // 标签页导航
    const onChange = (key: string) => {
        console.log(key);
        if(key=='1'){
            navigate('/index/WorkforceManagement/SchedulingSettings/BasicSettings')
        }else{
            navigate('/index/WorkforceManagement/SchedulingSettings/Timeperiodsetting')
        }
    };
      
      const items: TabsProps['items'] = [
        {
          key: '1',
          label: '基础设置',
        },
        {
          key: '2',
          label: '排班时段设置',
        },
      ];
    return ( 
        <>
            <div className={style.SchedulingSettings}>
                <div className={style.settingtitle}>
                    <Tabs className={style.tabs} defaultActiveKey="1" items={items} onChange={onChange} />
                </div>
                <div className={style.content}>
                    <Outlet></Outlet>
                </div>
            </div>
        </>
     );
}

export default SchedulingSettings;